<template>
    <div>
        <a-modal
            title="批量办理"
            v-model:visible="batchProcessingVisible"
            @ok="batchProcessingHandleOk"
            @cancel="batchProcessingVisible = false"
            :forceRender="true"
        >
            <div>
                <a-form
                    ref="form"
                    layout="inline" 
                    :form="form" 
                >
                    <a-form-item label="选择办理人">
                        <a-select
                            :options="HandledByOptions"
                            mode="multiple"
                            placeholder="请选择办理人"
                            style="width: 200px"
                            v-decorator="['dbrid',{ initialValue:formState.dbrid, rules: rules.dbrid}]"
                            
                            >
                        </a-select>
                    </a-form-item>
                    <a-form-item label="办理意见" class="comments-or-reasons-box">
                        <a-textarea @keyup="ideakeyupEvent"
                            ref="opinionsRef"
                            :key="opinionsKey"
                            @focus="ideaFocusEvent" @blur="ideaBlur" @click="ideaClick" placeholder="请输入办理意见" :rows="4" 
                            v-decorator="['opinion',{ initialValue:formState.opinion, rules: rules.opinion}]"
                            />
                    </a-form-item>
                    <a-form-item label="下个环节">
                        <span style="padding-right: 30px;">任务分配</span>短信通知<a-checkbox style="margin-left: 10px;" v-model:checked="formState.smgflag"></a-checkbox>
                    </a-form-item>
                </a-form>
            </div>
            <a-modal
            title="办理意见"
            v-model:visible="ideaVisible"
            @ok="ideaHandleOk"
            class="idea-modal-box"
            @cancel="ideaVisible = false"
            >
                <!-- <a-spin size="large" :spinning="spinning"> -->
                    <a-form layout="inline">
                        <a-form-item label="办理意见" class="pull-input-w">
                            <div style="display: flex;align-items: center;">
                                <vxe-textarea rows="3" @focus="recordCommentsFocus" @blur="recordCommentsBlur" @change="recordCommentsChange"  v-model="opinionsText" placeholder="请输入或选择办理意见" suffix-icon="vxe-icon-search"></vxe-textarea>
                                <a-button style="margin-left: 15px;" class="blue-btn"  type="primary" @click.stop="saveComments" >保存</a-button>
                            </div>
                            <div class="opinion-record-box" v-show="isRecordComments">
                                <div v-if="opinionsList.length" class="content-box">
                                    <div v-for="(item,index) in opinionsList" class="content-for">
                                        <div @click.stop="selectIdea(item)"  class="content-item">
                                            <span class="content-text">{{ item.fcontent }}</span>
                                            <a-button class="red-btn" size="small" type="primary" @click.stop="deleteIdea(item)" >删除</a-button>
                                        </div>
                                    </div>
                                </div>
                                <div class="no-data-box" v-else>暂无记录！</div>
                            </div>
                        </a-form-item>
                    </a-form>
                <!-- </a-spin> -->
            </a-modal>
        </a-modal>
    </div>
</template>
<script>
import { getYlqxRwfpUserDbList, batchSubmitRwflNode,addBatchIdeaServe,handlingOpinionsListServe } from './service/index'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            batchProcessingVisible:false,
            jobids:'',
            form: this.$form.createForm(this, { name: 'formName' }),
            HandledByOptions:[],
            formState:{dbrid:[],opinion:''},
            rules:{
                dbrid: [{
                    type:'array',
                    required: true,
                    message: '请选择办理人',
                    trigger: 'blur',
                }],
                opinion: [{
                    required:true,
                    message: '请输入办理意见',
                    trigger: 'blur',
                }],
            },
            visishow:true,
            opinionsText:'',
            opinionsList:[],
            opinionsKey:null,
            ideaVisible:false,
            isRecordComments:false,
        }
    },
    watch:{

    },
    mounted(){
        getYlqxRwfpUserDbList().then(res=>{
            if(res.code == 200){
                this.HandledByOptions = []
                if(res.result && res.result.nextNodeDbrList.length){
                    this.formState.dbrid = [res.result.nextNodeDbrList[0].dbrid]
                    this.form.setFieldsValue({
                        dbrid:[res.result.nextNodeDbrList[0].dbrid],
                    });
                    res.result.nextNodeDbrList.forEach(item => {
                        item = {
                            value:item.dbrid,
                            label:item.dbr
                        }
                        let arr = this.HandledByOptions.filter(i=>i.value == item.dbrid)
                        if(!arr.length){
                            this.HandledByOptions.push(item)
                        }
                        
                    });
                }
            }else{
                this.HandledByOptions = []
                this.$message.warning(res.message)
            }
        })
    },
    methods:{
        getData(val){
            this.jobids = val
        },
        getHandlingOpinionsList(val){//查询办理意见
            handlingOpinionsListServe({ftype1:'办理意见',pageNo:1,pageSize:1000,fcontent:val}).then(res=>{
                if(res.code == 200){
                    this.opinionsList = res.result.records
                }
            })
        },
        recordCommentsChange(){
            this.getHandlingOpinionsList(this.opinionsText)
        },
        selectIdea(val){//选择办理意见
            this.opinionsText = val.fcontent
            this.isRecordComments = false
            this.recordCommentsBlur()
        },
        recordCommentsFocus(){
            this.isRecordComments = true
            this.getHandlingOpinionsList('')
        },
        recordCommentsBlur(){},
        deleteIdea(val){//删除办理意见
            deleteBatchIdeaServe({ids:val.id}).then(res=>{
                if(res.code == 200){
                    this.getHandlingOpinionsList(this.opinionsText)
                }else{
                    this.$message.warning(res.message)
                }
            })
        },
        ideaHandleOk(){
            var that = this
            this.ideaVisible = false
            
            //console.log('this.opinionsText',this.opinionsText)
            this.formState.opinion = this.opinionsText
            
            this.opinionsKey = Date.now()
            //console.log('this.opinionsText',this.formState.opinion)
           this.form.setFieldsValue({
                opinion:that.opinionsText,
            });

           
        },
        ideakeyupEvent(){
            
        },
        ideaClick(){
            this.ideaVisible = true
            this.spinning = true
            this.formState.opinion = this.opinionsText
        },
        ideaBlur(){

        },
        ideaFocusEvent(){
            //console.log('2222')
            this.ideaBlur()
        },
        saveComments(){
            this.ideaHandleOk()
            if(this.opinionsText){
                addBatchIdeaServe({ftype1:'办理意见',fcontent:this.opinionsText}).then(res=>{
                    if(res.code == 200){
                        this.$message.success(res.message)
                    }else{
                        this.$message.warning(res.message)
                    }
                    this.getHandlingOpinionsList()
                })
            }
        },
        batchProcessingHandleOk(){
            this.form.validateFields((err, values) => {
                if(!err){
                    let data = {
                        jobids:this.jobids,
                        dbrid:values.dbrid.join(','),
                        opinion:this.formState.opinion,
                        smgflag:this.formState.smgflag?'是':'否',
                    }
                    batchSubmitRwflNode(data).then(res=>{
                        if(res.code == 200){
                            this.batchProcessingVisible = false
                            this.$emit('successReturn')
                        }else{
                            this.$message.warning(res.message)
                        }
                    })
                }
            })
            
        },
    }
}
</script>